<template>
    <div>
        <cus-search>
            <cus-search-item>
                <Form :model="searchForm" :label-width="80">
                    <FormItem label="检查日期" class="mr_48 mb_20">
                        <cus-cascadeDate :startTime.sync="searchForm.startTime" :showWeekNum="false"
                            :endTime.sync="searchForm.endTime" :need-init="false" :only-month="false" type="datetime"
                            format="yyyy-MM-dd" :dateWidth="200"></cus-cascadeDate>
                    </FormItem>
                    <FormItem label="出勤情况" class="mr_48 mb_20">
                        <Select v-model="searchForm.attendance" clearable placeholder="请选择出勤情况" style="width: 200px;">
                            <Option :value="item.value" v-for="item in attendanceList" :key="item.value">{{ item.label }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem label="伙食单位" class="mr_48 mb_20">
                        <Select style="width: 200px" v-model="searchForm.unitCode">
                            <Option v-for="item in unitList" :key="item.id" :value="item.unitCode">{{ item.unitName }}
                            </Option>
                        </Select>
                    </FormItem>
                    <cusButton size="small" class="mr_10 mb_20" type="primary" @onClick="pageOption.page = 1; onInit();">查询
                    </cusButton>
                    <cusButton size="small" class="mr_10 mb_20" type="primary" ghost @onClick="onReset">重置</cusButton>
                    <!-- <cusButton class="mr_10" type="primary" ghost @onClick="onAdd">添加</cusButton> -->
                </Form>
            </cus-search-item>
        </cus-search>
        <div class="bottomPanel">
            <cus-card title="晨检自查列表">
                <cus-table :border="true" :loading="loading" :columns="columns" :data="data" :size="vuex_config.tableSize"
                    :bottomClass="['cus-page']">
                    <!-- <template slot-scope="{ row, index }" slot="operate">
                    <div class="flex">
                        <cus-button type="text" size="small" :style="{ color: '#1E6FFF', padding: '0 8px' }"
                            @onClick="onEdit(row)">
                            修改
                        </cus-button>
                    </div>
                </template> -->
                    <template slot-scope="{ row, index }" slot="attendance">
                        <span>{{ getAttendance(row.attendance) }}</span>
                    </template>
                    <template slot-scope="{ row, index }" slot="healthStatus">
                        <span>{{ getHealthStatus(row.healthStatus) }}</span>
                    </template>
                    <template slot-scope="{ row, index }" slot="disease">
                        <span>{{ getDisease(row.disease) }}</span>
                    </template>
                </cus-table>
                <div style="width: 100%; display: flex; justify-content: flex-end">
                    <cus-page class="mt_20" :data="pageOption" @pageChange="onInit"></cus-page>
                </div>
            </cus-card>
            <!-- <cus-footer :showWaterMark="false">
                <div style="width: 100%;display: flex;justify-content: flex-end;padding-right: 20px;">
                    <cus-page :data="pageOption" @pageChange="onInit"></cus-page>
                </div>
            </cus-footer> -->
        </div>
    </div>
</template>

<script>
import { getSubCanteenList } from "@/api/organ/organization";
import { businessListSearch, } from '@/api/organ/business';
import { postBusinessListSearch, } from '@/libs/genericMethods.js';
export default {
    name: 'morningCheck',
    data() {
        return {
            loading: false,
            searchForm: {
                startTime: '',
                endTime: '',
                attendance: '',
                unitCode: '',
            },
            unitList: [],
            data: [],
            attendanceList: [
                {
                    value: '0',
                    label: '到岗',
                },
                {
                    value: '1',
                    label: '轮休',
                },
                {
                    value: '2',
                    label: '事假',
                },
                {
                    value: '3',
                    label: '病假',
                }
            ],
            columns: [
                {
                    title: '序号',
                    width: 70,
                    // key: 'num',
                    type: 'index',
                    align: 'center'
                },
                {
                    title: '检查日期',
                    minWidth: 120,
                    key: 'checkDate',
                    align: 'center',
                    fieldLength: 64,
                },
                {
                    title: '姓名',
                    minWidth: 120,
                    key: 'checkName',
                    align: 'center',
                    fieldLength: 64,
                },
                {
                    title: '出勤情况',
                    minWidth: 120,
                    slot: 'attendance',
                    align: 'center',
                    fieldLength: 64,
                },
                {
                    title: '体温',
                    minWidth: 120,
                    key: 'temperature',
                    align: 'center',
                    fieldLength: 64,
                },
                {
                    title: '卫生状况',
                    minWidth: 200,
                    slot: 'healthStatus',
                    align: 'center',
                    fieldLength: 256,
                },
                {
                    title: '疾病',
                    minWidth: 200,
                    slot: 'disease',
                    align: 'center',
                    fieldLength: 256,
                },
                {
                    title: '记录人',
                    minWidth: 120,
                    key: 'recorder',
                    align: 'center',
                    fieldLength: 64,
                },
                {
                    title: '备注',
                    minWidth: 180,
                    key: 'remark',
                    align: 'center',
                    fieldLength: 600,
                },
                // {
                //     title: '操作',
                //     minWidth: 120,
                //     slot: 'operate',
                //     align: 'center'
                // },
            ],
            pageOption: {
                page: 1,
                pageSize: 10,
                pageTotal: 0
            }
        }
    },
    mounted() {
        this.getSubCanteenList();
    },
    computed: {
        getAttendance(index) {
            return function (index) {
                let arr = ['到岗', '轮休', '事假', '病假']
                return arr[index]
            }
        },
        getHealthStatus(val) {
            return function (val) {
                let vals = val.split(',');
                let healthStatusList = [
                    {
                        value: '0',
                        label: '未按规定穿戴防护衣、卫生帽、口罩',
                    },
                    {
                        value: '1',
                        label: '着装不规范',
                    },
                    {
                        value: '2',
                        label: '双手不干净',
                    },
                    {
                        value: '3',
                        label: '指甲过长',
                    },
                    {
                        value: '4',
                        label: '佩戴戒指等饰品',
                    },
                    {
                        value: '5',
                        label: '其他卫生问题',
                    },
                ];
                let selectId = healthStatusList.filter((item) => vals.includes(item.value));
                return selectId.map(item => item.label).join(',');
            }
        },
        getDisease(val) {
            return function (val) {
                let vals = val.split(',');
                let diseaseList = [
                    {
                        value: '0',
                        label: '发热',
                    },
                    {
                        value: '1',
                        label: '恶心',
                    },
                    {
                        value: '2',
                        label: '呕吐',
                    },
                    {
                        value: '3',
                        label: '腹痛',
                    },
                    {
                        value: '4',
                        label: '烫伤',
                    },
                    {
                        value: '5',
                        label: '湿疹',
                    },
                    {
                        value: '6',
                        label: '咽痛',
                    },
                    {
                        value: '7',
                        label: '咳嗽',
                    },
                ];
                let selectId = diseaseList.filter((item) => vals.includes(item.value));
                return selectId.map(item => item.label).join(',');
            }
        },

    },
    methods: {
        onInit() {
            this.onSearch();
            // this.getErrorTempDailyListApi()
        },
        // 重置查询条件·
        onReset() {
            this.resetFilterForm();
            this.onSearch();
        },
        resetFilterForm() {
            this.searchForm.startTime = '';
            this.searchForm.endTime = '';
            this.searchForm.attendance = '';
            this.searchForm.unitCode = this.unitList[0].unitCode;
            this.pageOption.page = 1;
        },
        getSubCanteenList() {
            console.log(111);
            getSubCanteenList().then((res) => {
                if (res.code == 1) {
                    this.unitList = res.data.list;
                    this.searchForm.unitCode = res.data.list[0].unitCode;
                    this.onInit();
                }
            });
        },
        // 查询表
        searchTableList() {
            let searchCondition = [
                {
                    fieldKey: 'checkDate',
                    fieldName: 'startTime',
                    fieldValue: 'ge',
                },
                {
                    fieldKey: 'checkDate',
                    fieldName: 'endTime',
                    fieldValue: 'le',
                },
                {
                    fieldKey: 'attendance',
                    fieldName: 'attendance',
                    fieldValue: 'equal',
                },
            ];
            let params = {
                searchForm: this.searchForm,
                searchCondition,
            };
            return postBusinessListSearch(params);
        },
        // 查询晨检自查数据
        onSearch() {
            console.log(this.searchForm);
            this.loading = true;
            // console.log(this.searchTableList());
            let queryConditionItemList = this.searchTableList();
            businessListSearch({
                businessName: '晨检自查台账',
                org: this.searchForm.unitCode,
                queryConditionItemList,
                current: this.pageOption.page,
                size: this.pageOption.pageSize,
            }).then((res) => {
                if (res.retCode === 2000) {
                    console.log(res);
                    this.loading = false;
                    this.data = res.data.list;
                    this.pageOption.pageTotal = res.data.total;
                }
            }).catch((err) => {
                console.log(err);
            });
        },
        // 添加晨检自查数据
        // onAdd() {
        //     this.$refs['addMorningCheckModal'].show();
        // },
        // // 编辑晨检自查数据
        // onEdit(row) {
        //     this.$refs['addMorningCheckModal'].addForm.id = row.id;
        //     this.$refs['addMorningCheckModal'].show();
        // },
    }
}
</script>

<style scoped>
.bottomPanel {
    background-color: #fff;
    /* padding-top: 10px; */
    /* padding-bottom: 10px; */
    margin-top: 20px;
    border-radius: 6px;
    box-shadow: 0px 4px 8px 0px rgba(108, 137, 165, 0.18);
}
</style>
